<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/foot.css">
    <link rel="stylesheet" href="css/initial.css">
    <link rel="stylesheet" href="css/login.css">
</head>
<body>
    <!-- 顶部Begin -->
    <div class="top">
        <div class="center top_a">
            你好，欢迎来到美食美刻！
        </div>
    </div>
    <!-- 顶部END -->


    <!-- LOGO Begin -->
    <div class="logo">
        <div class="center l_c">
            <!-- 左边logo -->
            <div class="l_left fl">
                <h1>
                    <a href="#">美食美刻</a>
                </h1>
            </div>
            <!-- 中间搜索区域 -->
            <div class="l_center fl">
                <input class="txt " type="text" placeholder="请输入菜谱/食材/菜单">
                <input class="btn fr" type="button" value="搜索">
            </div>
            <!-- 右侧登录模块 -->
            <div class="l_right fr">
                <ul >
                    <li class="fl">
                        <b class=" l_QqLogin"></b>
                        <a href="#">QQ登录</a>
                    </li>
                    <li class="fl ">
                        <b class=" l_b2"></b>
                        <a href="#" >新浪登录</a>
                    </li>
                    <li class="fl ">
                        <a href="#" >注册</a>
                    </li>
                    <li class="fl ">
                        <input type="button" value="登录">
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <!-- LOGO END -->

    <!-- 中间内容Begin -->
    <div class="center main">
        <div>
            <div class="fl m_left">
                <img src="../meishimeike/image/cake.png" alt="美食">
            </div>
            <div class="fr m_right">
                <!-- 1 -->
                <h2>美时美刻</h2>
                <!-- 规范，input和h2元素不同级 -->
                <div>
                    <!-- 2 -->
                    <input class="m_txt" type="text" 
                    placeholder="请输入昵称">
                    <!-- 3 -->
                    <input class="m_psw" type="password"
                    placeholder="密码">
                </div>
                <!-- 4 -->
                <div class="remaber">
                    <span  class="fl"><input type="checkbox">
                    自动登录</span>
                    <a href="#" class="fr">忘记密码？</a>
                </div>
                <!-- 5 -->
                <div>
                    <input type="button" class="loginBtn" value="登录">
                </div>
                <!-- 6 -->
                <div>
                    <hr>
                </div>
                <div>
                    <span class="loginSp">其他方式</span>
                </div>
            </div>
        </div>
    </div>
     <!-- 中间内容END -->

     <!-- 底部Begin -->
     <div class="foot">
        <div class="f_border">
            <!-- 居中盒子 -->
            <div class="center">
                <!-- 左侧区 -->
                <div class="fl f_left">
                    <ul>
                        <li>中国,最大的菜谱库<span class="fz14">800,000</span>篇</li>
                        <li>每月,用户访问数量<span class="fz14">20,000,000</span>次</li>
                        <li>每年,菜谱浏览量<span class="fz14">36,000,000,000</span>次</li>
                        <li>现在,这些数字还在不断的增长着,欢迎您来一起使用美食美刻</li>
                    </ul>
                </div>
                <!-- 右侧区 -->
                <div class="fr f_right">
                    <li>
                        <a href="#">
                            <img src="../meishimeike/image/xinlang1.png" alt="爱美食微博官网">
                            <span>点击进入<br>爱美食微博官网</span>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="../meishimeike/image/weibo.png" alt="爱美食QQ空间">
                            <span>点击进入<br>爱美食QQ空间</span>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="../meishimeike/image/erweima.png" alt="添加VN好友">
                            <span>扫描二维码<br>添加爱美食为微信好友</span>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="../meishimeike/image/erweima.png" alt="下载手机客户端">
                            <span>扫描二维码<br>添加下载爱美食手机客户端</span>
                        </a>
                    </li>
                </div>
            </div>
        </div>
     </div>
     <!-- 底部END -->
     

</body>
</html>